<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>设备监控</title>
    <link href="{$Think.config.site.resource_url}/socket/css/bootstrap.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}/socket/css/style.css" rel="stylesheet">

    <script type="text/javascript" src="{$Think.config.site.resource_url}/socket/js/swfobject.js"></script>
    <script type="text/javascript" src="{$Think.config.site.resource_url}/socket/js/web_socket.js"></script>
    <script type="text/javascript" src="{$Think.config.site.resource_url}/socket/js/jquery.min.js"></script>

  <script type="text/javascript">
    if (typeof console == "undefined") {

    	his.console = { log: function (msg) {  } };
    }
    // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
    WEB_SOCKET_SWF_LOCATION = "/statics/socket/swf/WebSocketMain.swf";
    // 开启flash的websocket debug
    WEB_SOCKET_DEBUG = true;
    var ws, name, client_list={};

    // 连接服务端
    function connect() {
       	// 创建websocket
       	ws = new WebSocket("{$listenurl}");
       	// 当socket连接打开时，输入用户名
       	ws.onopen = onopen;
       	// 当有消息时根据消息类型显示不同信息
       	ws.onmessage = onmessage; 
       	ws.onclose = function(e) {
       		console.log(e)
       		var time = getNowFormatDate();
	      	$("#dialog").append('<div class="speech_item">'+time+'<div style="clear:both;"></div><p class="triangle-isosceles top">{:lang(\'连接关闭，30秒后自动重连!\')}</p> </div>');
          window.setTimeout(function(){ 
            connect();
          },30000); 

       	};
       	ws.onerror = function(e) {
       		console.log(e)
       		var time = getNowFormatDate();
       		$("#dialog").append('<div class="speech_item">'+time+'<div style="clear:both;"></div><p class="triangle-isosceles top">{:lang(\'出现错误!\')}</p> </div>');
       	};

       	
    }

    // 连接建立时发送登录信息
    function onopen()
    {
        // 登录
        var login_data = 'listen';//'service,{$key},{$time},listen'
        
        //$("#dialog").append('<div class="speech_item">'+time+'<div style="clear:both;"></div><p class="triangle-isosceles top">连接成功！</p> </div>');
        heartbeat();
        ws.send(login_data);
    }

    // 服务端发来消息时
    function onmessage(e)
    {
    	if(e){
    		//console.log(e.data);
	        var time = getNowFormatDate();
	        $("#dialog").append('<div class="speech_item">'+time+'<div style="clear:both;"></div><p class="triangle-isosceles top">'+e.data+'</p> </div>');
	         
    	}
    }

    function getNowFormatDate() {
	    var date = new Date();
	    var seperator1 = "-";
	    var seperator2 = ":";
	    var month = date.getMonth() + 1;
	    var strDate = date.getDate();
	    if (month >= 1 && month <= 9) {
	        month = "0" + month;
	    }
	    if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	    }
	    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
	            + " " + date.getHours() + seperator2 + date.getMinutes()
	            + seperator2 + date.getSeconds();
	    return currentdate;
	  }
    //心跳
    function heartbeat() {
    	var data = 'service,heartbeat';
        ws.send(data);
	    window.setTimeout(function(){ 
			heartbeat(); 
		},30000); 
	}

  </script>
</head>
<body onload="connect();">
    <div class="container">
	    <div class="row clearfix">
	        <div class="col-md-1 column">
	        </div>
	        <div class="col-md-6 column">
	           <div class="thumbnail">
	               <div class="caption" id="dialog"></div>
	           </div>
	     
      
	        </div>
	        <!--<div class="col-md-3 column">
	           <div class="thumbnail">
                   <div class="caption" id="userlist"></div>
               </div>

	        </div>-->
	    </div>
    </div>
</body>
</html>